<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>数据统计</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="css/comments.css" media="all">
    <style>
        .layui-form-label{
            width: 120px;
        }
        
    </style>
</head>
<body>
    <div class="maincontainer">
        <div class="layui-card">
            <div class="layui-card-header layuiadmin-card-header-auto">
                <form id="queryForm" class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">统计时间</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="selectTime" placeholder="-">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn"  lay-submit lay-filter="searchBth">查询</button>
                            <button type="reset" class="layui-btn layui-btn-primary reReset" >重置</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6 layui-col-lg6">
                        <div id="main1" style="width: 600px;height:400px;" onclick="location.href='orderManagement.html?type=1'"></div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6 layui-col-lg6">
                        <div id="main2" style="width: 600px;height:400px;" onclick="location.href='financeBill.html?type=1'"></div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6 layui-col-lg6">
                        <div id="main3" style="width: 600px;height:400px;" onclick="location.href='orderManagement.html?type=1'"></div>
                    </div>
                  </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="plugins/layui/layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/echarts.common.min.js"></script>
<script>
    layui.config({
        base: 'plugins/layui/modules/',
    }).use(['http', 'laydate', 'form'], function() {
        var http = layui.http,
            laydate = layui.laydate,
            form = layui.form;
			
			$('.reReset').click();
			
        http.checking(function() {

            //时间
            laydate.render({
                elem: '#selectTime'
                ,theme: '#fbaf7e'
                ,range: "-"
            });
            
            // 统计
            var myChart1 = echarts.init(document.getElementById('main1'));
            var myChart2 = echarts.init(document.getElementById('main2'));
            var myChart3 = echarts.init(document.getElementById('main3'));
            chartFun()
            function chartFun(startTime,endTime,canteenId){
                http.get('supplier/admin/count/count',{
                    startTime: startTime,
                    endTime: endTime,
                    canteenId: canteenId
                },function(res){
                    if(res.code == 200){

                        chart1Fun(res.data)
                        chart2Fun(res.data)
                        chart3Fun(res.data)
                        
                    }else{
                        layer.msg(res.msg)
                    }
                })

            }
            // 待确认订单
            function chart1Fun(data){
                var option = {
                    title: {
                        text: '待确认订单'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    color: ['#2FBEE4','#F18C58'],
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: ['待确认订单', '其他']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: data.supplierOrderCountVo.notConfirmOrderCount, name: '待确认订单'},
                                {value: data.supplierOrderCountVo.otherOrderCount, name: '其他'},
                            ]
                        }
                    ]
                };
                
                // console.log(option)
                myChart1.setOption(option);
            }
            // 账单金额
            function chart2Fun(data){
                var option = {
                    title: {
                        text: '账单金额'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    color: ['#3FDA93','#2FBEE4','#F18C58'],
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: ['已完成金额', '已结账金额', '待结账金额']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: data.supplierOrderBillCountVo.completeMoney, name: '已完成金额'},
                                {value: data.supplierOrderBillCountVo.payedMoney, name: '已结账金额'},
                                {value: data.supplierOrderBillCountVo.notPayMoney, name: '待结账金额'},
                            ]
                        }
                    ]
                };
                myChart2.setOption(option);
            }
            // 订单配送
            function chart3Fun(data){
                var option = {
                    title: {
                        text: '订单配送'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    color: ['#2FBEE4','#F18C58'],
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: ['已配送订单', '待配送订单']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: data.supplierOrderCountVo.sendOrderCount, name: '已配送订单'},
                                {value: data.supplierOrderCountVo.notSendOrderCount, name: '待配送订单'},
                            ]
                        }
                    ]
                };
                myChart3.setOption(option);
            }

            //查询
            form.on('submit(searchBth)', function (data) {
                var time = $('#selectTime').val()
                if(time){
                    var startTime = $('#selectTime').val().split(' - ')[0]
                    var endTime = $('#selectTime').val().split(' - ')[1]
                    chartFun(startTime,endTime)
                }
                return false;
            })
        })


    })

</script>
</html>